import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { RouterStore } from 'mobx-react-router';
import ComponentStore from '../../stores/ComponentStore';
import NavBar from '../../component/nav_bar/navBar';

import './MessageDetail.scss';

interface MessageDetailProps {
    componentStore: ComponentStore;
    routingStore: RouterStore;
}

@inject('componentStore', 'routingStore')
@observer
export default class SubHome extends Component<MessageDetailProps> {

    render(): JSX.Element {
        const {componentStore, routingStore} = this.props;
        const index = componentStore.messageListIndex;
        const message = componentStore.messageList[index];
        return (
            <div className="subHome-container">
                <NavBar 
                    routingStore={routingStore}
                />
                <div className="message-box">
                    <div className="message-container">
                        <h4 className="message-title">
                            {message.title}
                        </h4>
                        <p className="message-content">
                            {message.content}
                        </p>
                    </div>
                </div>

            </div>
        );
    }
}